<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'FilterContrast',
    setup() {}
  })
</script>

<template>
  <div class="word-group relative h-full">
    <div class="word absolute top-1/2 left-1/2">Iphone</div>
    <div class="word absolute top-1/2 left-1/2">Android</div>
  </div>
</template>

<style lang="scss" scoped>
  @use 'sass:math';

  $count: 2;
  $speed: 8s;
  .word-group {
    font-size: 120px;

    filter: contrast(15);
  }
  .word {
    transform: translate(-50%, -50%);
    animation: change 8s infinite ease-in-out;

    @for $i from 0 to $count {
      &:nth-child(#{$i + 1}) {
        animation-delay: (math.div($speed, $count + 1) * $i) - $speed;
      }
    }
  }
  @keyframes change {
    0%,
    5%,
    100% {
      opacity: 1;

      filter: blur(0);
    }
    50%,
    80% {
      opacity: 0;

      filter: blur(80px);
    }
  }
</style>
